<html>
    <style>
        #pdf{
            width: 100%;
            height:100%;
        }
        #pdf img{
            width: 100%;
        }
        canvas{
            width: 100%;
            margin: 1px 0;
        }
    </style>

    <body>
        <div id="pdf" >
            <canvas id="myCanvas1"></canvas>
			<canvas id="myCanvas2"></canvas>
			<canvas id="myCanvas3"></canvas>
			<canvas id="myCanvas4"></canvas>

        </div>
    </body>
</html>
<script>
function dramImg(num){
	  var canvas =document.getElementById("myCanvas"+num);
	  var ctx =canvas.getContext("2d"); 
	  var img = new Image();
	  img.src ='./img1/'+ num + '.png'
	  canvas.width = 377;
	  canvas.height = 534;
	  img.onload = function (){
		ctx.drawImage(img,0,0,377,534)
	  }
	if(num==1){

		  var img2 = new Image();
		  img2.src ='./img1/qrcode.png?[t'+parseInt(Math.random()*1000)+']='+new Date().getTime();
		  img2.onload = function (){
			  ctx.drawImage(img2,0,0,67,76,315,5,52,52)
		  }
	}else if(num==2){
		var img3 = new Image();
		img3.src ='./img1/qrcode2.png?[tt'+parseInt(Math.random()*1000)+']='+new Date().getTime();
		img3.onload = function (){
			ctx.drawImage(img3,0,0,67,76,302,12,55,55)
		}	
	}
}
dramImg(1);
dramImg(2);
dramImg(3);
dramImg(4);
</script>